<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/echarts_page.css" rel="stylesheet" />
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">丝雨</h1>
		</header>
		<div class="mui-content">
			<div id="" style="text-align: center; margin-top: 20px;">
				<button id="priv"></button><button type="button" id="datetimes" disabled="disabled"></button><button type="button" id="next"></button>
			</div>
			<hr >
			
			<div id="main1" style="width: 100% ;height:200px;" ></div>
			<hr >
			<div id="main2" style="width: 100% ;height:160px;" ></div>
			<hr >
			<div id="main3" style="width: 100% ;height:260px;" ></div>
		</div>
		
		<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts-en.min.js"></script>
		<script type="text/javascript">
		    mui.plusReady(function () {
				
				var times = new Date();
				var year = times.getFullYear()
				var month = (times.getMonth() + 1)
				document.getElementById('datetimes').innerText = year + '-' +month
				
				
		        // 基于准备好的dom，初始化echarts实例
		        var myChart1 = echarts.init(document.getElementById('main1'));
				var myChart2 = echarts.init(document.getElementById('main2'));
				var myChart3 = echarts.init(document.getElementById('main3'));
		        // 指定图表的配置项和数据
		        var option1 = {
					title: {
					        text: '每月消费占比',
					        subtext: '',
					        left: 'right'
					    },
		        	tooltip: {
		        		trigger: 'item',
		        		formatter: '{a} <br/>{b}: {c}元 ({d}%)'
		        	},
		        	legend: {
		        		orient: 'vertical',
		        		left: 10,
		        		data: ['收入', '借出', '餐饮', '通讯', '娱乐', '购物', '交通', '杂项']
		        	},
		        	series: [
		        		{
		        			name: '消费类型',
		        			type: 'pie',
		        			radius: ['60%', '80%'],
		        			avoidLabelOverlap: false,
		        			label: {
		        				normal: {
		        					show: false,
		        					position: 'center'
		        				},
		        				emphasis: {
		        					show: true,
		        					textStyle: {
		        						fontSize: '30',
		        						fontWeight: 'bold'
		        					}
		        				}
		        			},
		        			labelLine: {
		        				normal: {
		        					show: false
		        				}
		        			},
		        			data: [],
		        		}
		        	]
		        };
				
				option2 = {
					color: ['#3398DB'],
				    title: {
				        text: '收入支出',
						left: 'right',
				    },
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'shadow'
				        },
						formatter: '{b}: {c}元'
				    },
				    legend: {
				        data: ''
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'value',
				        boundaryGap: [0, 0.01]
				    },
				    yAxis: {
				        type: 'category',
				        data: ['收入', '支出']
				    },
				    series: [
				        {
				            type: 'bar',
				            data: ''
				        },
				        
				    ]
				};

				option3 = {
					title: {
						fontSize: '12',
					    text: '消费轨迹',
						left: 'right',
					},
				    color: ['#3398DB'],
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
				            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        },
						formatter: '{a} <br/>{b}日: {c}元'
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: [
				        {
				            type: 'category',
				            data: '',
				            axisTick: {
				                alignWithLabel: true
				            }
				        }
				    ],
				    yAxis: [
				        {
				            type: 'value'
				        }
				    ],
				    series: [
				        {
				            name: '金额',
				            type: 'bar',
				            barWidth: '60%',
				            data: ''
				        }
				    ]
				};
				
		        get_data(option1, year, month)
		        // 使用刚指定的配置项和数据显示图表。
		        myChart1.setOption(option1);
		        myChart2.setOption(option2);
		        myChart3.setOption(option3);
				
				document.getElementById('priv').addEventListener('tap', function(){
					if(month == 1){
						month = 12
						year = year - 1
					}else{
						month = month - 1
					}
					document.getElementById('datetimes').innerText = year + '-' +month
					get_data(option1, year, month)
					myChart1.setOption(option1);
					myChart2.setOption(option2);
					myChart3.setOption(option3);
				})
				document.getElementById('next').addEventListener('tap', function(){
					if(month == 12){
						month = 1
						year = year + 1
					}else{
						month = month + 1
					}
					document.getElementById('datetimes').innerText = year + '-' +month
					get_data(option1, year, month)
					myChart1.setOption(option1);
					myChart2.setOption(option2);
					myChart3.setOption(option3);
				})
		    })
			
			function get_data(option1, year, month){
				mui.ajax(localStorage.getItem('request_url')+ "cost/get_local_map/?token="+localStorage.getItem('uid'), {
					data:"token=" + localStorage.getItem('uid') + "&year=" + year+ "&month=" + month,
					dataType:'json',  
					type:'POST',
					async: false,
					contentType:"application/x-www-form-urlencoded; charset=utf-8",  
					timeout:2000,  
					success:function show(e){
						option1.series[0].data = e.data.data
						option2.series[0].data = e.data.in_out
						option3.series[0].data = e.data.value_list
						option3.xAxis[0].data = e.data.time_list
					},  
					error:function(xhr,type,errorThrown){
						mui.toast('同步失败...下拉刷新');
					}  
				});
			}
		</script>
		
	</body>

</html>
